import React, { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { NavBar, Toast } from '@nutui/nutui-react'

import { Share, More, Cart, ArrowLeft, Close } from '@nutui/icons-react'
import axios from 'axios'
import { List, Button } from 'antd-mobile'
export default function Dan() {
  const [list, setlist] = useState([
    { id: 1, name: '用户123', img: [], zan: 60, text: "17功率太厉害了", time: '3小时前', from: '保定理工学院' }
  ])
  const [list1, setlist1] = useState([{
    imgs: [], comment: []
  }])
  const params = useParams()
  const getlist = async () => {
    let { data } = await axios.get(`http://localhost:3000/getdan?id=${params.id}`)
    setlist1(data.list)
    console.log(data.list[0])
  }
  const ll = async () => {
    let { data } = await axios.post(`http://localhost:3000/faping?id=${params.id}`,
      { id: 1, name: "用户1231", zan: 0, text: name, time: new Date(), from: '保定理工学院' })

  }
  useEffect(() => {
    getlist()
  }, [])
  const Navigate = useNavigate()
  const [name, setName] = useState('')
  return (
    <div>
      <div style={{ width: '100%' }}>

        <p>
          <NavBar
            back={
              <>
                <ArrowLeft onClick={() => {
                  Navigate(-1)
                }} />

              </>
            }

          // onBackClick={(e) => Toast.show('返回')}
          >
            动态详情

          </NavBar>
        </p>
        <div style={{ padding: '10px' }}>
          <div>
            <img src={list1[0].img} style={{ width: '30px', float: 'left', height: '30px', borderRadius: '50%' }}></img>
            <div style={{ paddingLeft: '10px' }}>
              <p onClick={() => {
                console.log(list1)
              }}> {list1[0].name}</p>
              <p style={{ color: 'gray', fontSize: '11px' }}>{list1[0].time} {list1[0].address}</p>
            </div>
          </div>
          <p style={{ marginTop: '15px', marginBottom: '15px' }}>{list1[0].test}</p>
          <div style={{ margin: '0 auto' }}>
            {list1[0].imgs.map(item => {
              return <img src={item} style={{ width: '100px' }}></img>
            })}
          </div>


        </div>
        <div style={{ padding: '10px' }}>
          <p>
            <span style={{ fontWeight: 'bold' }}>评论 2346</span>
            <span style={{ float: 'right', color: 'gray', fontSize: "11px" }}>点赞 2346</span>
            &nbsp;&nbsp;
            <span style={{ float: 'right', color: 'gray', fontSize: "11px" }}>转发 2346</span>
          </p>
          {list1[0].comment.map(item => {
            return <div style={{ width: '98%', marginBottom: '35px', height: '80px', float: 'left', marginTop: '20px' }}>
              <p style={{ float: 'left' }}>
                <img src="https://cdn7.axureshop.com/demo2024/2268035/images/%E6%9C%80%E6%96%B0%E5%8A%A8%E6%80%81/u222-0.svg" style={{ width: '30px', float: 'left', height: '30px', borderRadius: '50%' }}></img>
                <span style={{ float: 'left', marginTop: '8px' }}>用户12314123</span>
                <span style={{ marginLeft: '190px' }}>{item.zan} 👍</span>
              </p>
              <div style={{ float: 'left', margin: '10px' }}>
                <p>{item.text}</p>
              </div>
              <p style={{ float: 'left', color: 'gray', fontSize: "11px", marginLeft: '10px' }}>{item.time} 来自:{item.address}</p>
            </div>
          })}
          <input style={{ width: '250px', float: 'left', height: '20px', borderRadius: '10px', paddingLeft: '5px' }} placeholder='我来说两句' value={name} onChange={(e) => {
            setName(e.target.value)
          }}></input><button style={{ width: '40px', float: 'left' }} onClick={() => {
            ll()
          }}>发布</button>
          <span style={{ display: 'inline-block', marginLeft: '12px', float: 'left', marginTop: '-2px' }}>
            <ul style={{ listStyle: 'none', display: 'inline-block' }} onClick={async () => {
              let { data } = await axios.post("http://localhost:3000/collectzan", {
                flag: list1[0].praise,
                id: list1[0]._id
              })
              getlist()
            }} >
              {list1[0].praise ? <li>👍</li> : <li>
                <img src='https://cdn7.axureshop.com/demo2024/2268035/images/%E5%8A%A8%E6%80%81%E8%AF%A6%E6%83%85/u332.svg'></img>
              </li>}


              <li>{list1[0].praise ? list1[0].praisenum + 1 : list1[0].praisenum}</li>
            </ul>



            <ul style={{ listStyle: 'none', display: 'inline-block', marginLeft: '10px' }} onClick={async () => {
              let { data } = await axios.post("http://localhost:3000/collect", {
                flag: list1[0].collect,
                id: list1[0]._id
              })
              getlist()
            }}  >
              <li>
                {list1[0].collect ? <svg style={{ width: '20px', height: '20px' }} t="1725673389297" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4452" width="200" height="200"><path d="M575.12 131l94.74 192a47.68 47.68 0 0 0 35.9 26.08l211.84 30.78c39.11 5.68 54.72 53.74 26.43 81.33l-153.3 149.39a47.68 47.68 0 0 0-13.73 42.2l36.19 211c6.68 39-34.2 68.65-69.18 50.26l-189.46-99.62a47.68 47.68 0 0 0-44.38 0L320.7 914c-35 18.39-75.86-11.31-69.18-50.26l36.19-211A47.68 47.68 0 0 0 274 610.58L120.7 461.16c-28.3-27.58-12.68-75.65 26.43-81.33L359 349.05A47.68 47.68 0 0 0 394.87 323l94.73-192c17.49-35.43 68.03-35.43 85.52 0z" fill="#FED547" p-id="4453"></path><path d="M943.3 461.77c28.3-27.58 12.68-75.65-26.43-81.33L705 349.66a47.68 47.68 0 0 1-35.9-26.08l-94.74-192c-16.31-33.05-61.35-35.25-81.53-6.65a49.51 49.51 0 0 1 4 6.65l94.74 192a47.68 47.68 0 0 0 35.9 26.08l211.84 30.78c39.11 5.68 54.72 53.74 26.43 81.33L712.47 611.19a47.68 47.68 0 0 0-13.71 42.2l36.19 211a46.76 46.76 0 0 1-11.52 39.81l19.89 10.46c35 18.39 75.86-11.31 69.18-50.26l-36.19-211A47.68 47.68 0 0 1 790 611.19z" fill="#E2B742" p-id="4454"></path><path d="M263.93 925.77a54 54 0 0 1-53.06-63.05l36.19-211A41.47 41.47 0 0 0 235.13 615L81.85 465.6a53.88 53.88 0 0 1 29.87-91.9l211.83-30.78a41.51 41.51 0 0 0 31.23-22.69l94.73-192a53.89 53.89 0 0 1 96.64 0l94.74 192a41.5 41.5 0 0 0 31.23 22.69L884 373.7a53.88 53.88 0 0 1 29.86 91.9L760.53 615a41.45 41.45 0 0 0-11.93 36.71l36.19 211a53.88 53.88 0 0 1-78.18 56.8l-189.48-99.6a41.49 41.49 0 0 0-38.6 0l-189.47 99.61a53.86 53.86 0 0 1-25.13 6.25z m233.9-815.13a40.71 40.71 0 0 0-37.19 23.12l-94.73 192a53.89 53.89 0 0 1-40.57 29.47L113.5 386a41.48 41.48 0 0 0-23 70.75l153.3 149.39a53.88 53.88 0 0 1 15.5 47.69l-36.19 211a41.48 41.48 0 0 0 60.18 43.73l189.48-99.61a53.81 53.81 0 0 1 50.15 0l189.47 99.61a41.48 41.48 0 0 0 60.18-43.73l-36.19-211a53.86 53.86 0 0 1 15.5-47.69l153.28-149.42a41.48 41.48 0 0 0-23-70.75l-211.82-30.78a53.88 53.88 0 0 1-40.57-29.47L535 133.75a40.71 40.71 0 0 0-37.17-23.12z" fill="#28CA67" p-id="4455"></path></svg>
                  : <svg style={{ width: '20px', height: '20px' }} t="1725673475834" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1508" width="200" height="200"><path d="M1003.735979 445.925119 1003.735979 445.925119 746.069525 635.190717l99.258655 307.950697c1.547239 4.76963 2.40477 9.924024 2.40477 15.210423 0 26.948769-21.48329 48.734958-47.963385 48.734958-10.509355 0-20.191878-3.477194-28.105105-9.282411l0 0L512.001535 807.118438 252.337587 997.802338l-0.016373 0c-7.896854 5.805216-17.58347 9.282411-28.090778 9.282411-26.495444 0-47.962362-21.786189-47.962362-48.734958 0-5.2864 0.854461-10.440793 2.4017-15.210423l99.259678-307.950697L20.250718 445.925119l0.016373 0C8.244266 437.092963 0.410857 422.717557 0.410857 406.471548c0-26.881231 21.466917-48.671513 47.960315-48.671513l0 0 318.987055 0 98.775654-306.463834c6.027274-19.9821 24.270776-34.422997 45.86663-34.422997 21.595854 0 39.839357 14.439874 45.849234 34.422997l98.791004 306.463834 318.988078 0 0 0c26.494421 0 47.959292 21.790282 47.959292 48.671513C1023.587096 422.717557 1015.756757 437.092963 1003.735979 445.925119z" p-id="1509"></path></svg>
                }
              </li>
            </ul>
          </span>

        </div>


      </div>
    </div>
  )
}
